import Taro, {Component} from '@tarojs/taro'
import {View, Text, Swiper, SwiperItem, Image, RichText} from '@tarojs/components'
import {companyName, getRuntime, ServerHost} from "../../utils/common";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'

import FooterInfo from '../../components/FooterInfo'
import FooterMenu from '../../components/FooterMenu'
import './index.less'

import banner_01 from '../../assets/img/banner_01.jpg'
import nav_01 from '../../assets/img/nav_01.png'
import nav_02 from '../../assets/img/nav_02.png'
import nav_03 from '../../assets/img/nav_03.png'
import nav_04 from '../../assets/img/nav_04.png'
import nav_05 from '../../assets/img/nav_05.png'
import nav_06 from '../../assets/img/nav_06.png'
import nav_07 from '../../assets/img/nav_07.png'
import nav_08 from '../../assets/img/nav_08.png'
import nav_09 from '../../assets/img/nav_09.png'
import nav_10 from '../../assets/img/nav_10.png'
import icon_01 from '../../assets/img/icon_01.png'
import icon_02 from '../../assets/img/icon_02.png'
import icon_03 from '../../assets/img/icon_03.png'
import icon_05 from '../../assets/img/icon_05.png'
import icon_24 from '../../assets/img/icon_24.png'



interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userWeChatInfo: {}
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: companyName})
    let userInfo = getRuntime().getUserInfo() || {}
    // 判断登录是否过期
			if(Object.keys(userInfo).length > 0){
				let nowTime = new Date().getTime()
				if(nowTime > userInfo.expireTime) {
          Taro.removeStorageSync('user')
				}
      }
      
    if(!userInfo.hasOwnProperty('isActive') || !userInfo.isActive) { Taro.removeStorageSync('user') }
    let { homeStore } = this.props.stores
    homeStore.getHomeInfo({})
  }

  componentDidMount () {
    // let url = window.location.href
    let code: any = this.$router.params.code || ''
    // 获取用户信息, 判断用户是否关注公众号
    let user = getRuntime().getUserInfo()
    let token = user&&user.token ? 'Bearer '+user.token : ''
    if(user&&!user.token) {  getRuntime().redirectTo('/pages/other/bindPhone') }
    if(code && token ){
      let fetchUrl = ServerHost+'/api/Account/getWchatUserInfo?code='+code
      fetch(fetchUrl, {
        method: 'GET',
        headers: {
          'Authorization': token
        },
      }).then(response => {
        return response.json()
      }).then( res=>{
        console.log(res)
        if(res.subscribe == '0'){ // 未关注
          // 弹出关注页，可是有些用户不会弹出关注页，也是奇怪，打算缓存关注字段，进入首页再次判断是否关注，到关注页生命周期结束后清除关注缓存信息
          getRuntime().redirectTo('/pages/login/qrcode')
        }
      }).catch(e => {
        console.error(e)
      })
    }
  }

  componentWillUnmount() {
    Taro.removeStorageSync('userIsSubscribe')
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({title: companyName})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  upgrade(url: string = '/pages/index/index') {
    let userInfo = getRuntime().getUserInfo()
    if(!userInfo) {getRuntime().navigateTo('/pages/other/bindPhone'); return}
    /* if(url === '/pages/declareTax/index') {
      Taro.showModal({
        title: '通知',
        content: '2019年税局年底扎帐，出税日期截止到2019年12月24日下午5:00，12月25日起停单。2019年余下的时间不再出税，2020年1月1日恢复正常上班出税，感谢你对捷佳车服的支持。'
      })
      return
    } */
    getRuntime().navigateTo(url)
  }

   // 页面隐藏
   componentDidHide() {
    Taro.removeStorageSync('userIsSubscribe')
  }
  render() {
    let home = toJS(this.props.stores.homeStore.home)
    let homeTopAdverts = home.homeTopAdverts || []
    let homeHeadlines = home.homeHeadlines || []
    return (
      <View className='index ccs-index'>
        <View className='swiper-wrap'>
          <Swiper className='swiper' indicatorColor='#eeeeee' indicatorActiveColor='#fff' indicatorDots autoplay circular interval={2000} >
            {homeTopAdverts && homeTopAdverts.map(item => {
              return (
                <SwiperItem className='swiper-item' key={item.id}>
                  <Image className='swiper-img' src={item.picture} onClick={this.link.bind(this, item.url)} />
                </SwiperItem>
              )
            })}
          </Swiper>
        </View>
         <View className='index-nav content-30 pt0'>
           <View className='index-nav__item' onClick={this.upgrade.bind(this,'/pages/declareTax/index')}>
             <Image className='index-nav__icon' src={nav_01} />
             <Text className='index-nav__title'>车辆报税</Text>
           </View>
         {/*   <View className='index-nav__item' onClick={this.link.bind(this,'/pages/index/myCar')}>
             <Image className='index-nav__icon' src={nav_02}/>
             <Text className='index-nav__title'>客车</Text>
           </View>
           <View className='index-nav__item'>
             <Image className='index-nav__icon' src={nav_03}/>
             <Text className='index-nav__title'>货车</Text>
           </View>
           <View className='index-nav__item'>
             <Image className='index-nav__icon' src={nav_04}/>
             <Text className='index-nav__title'>挂车</Text>
           </View>
           <View className='index-nav__item'>
             <Image className='index-nav__icon' src={nav_05}/>
             <Text className='index-nav__title'>作业车</Text>
           </View>
           <View className='index-nav__item'>
             <Image className='index-nav__icon' src={nav_06}/>
             <Text className='index-nav__title'>机械车</Text>
           </View> */}
           <View className='index-nav__item' onClick={this.upgrade.bind(this,'/pages/index/queryAuth')}>
             <Image className='index-nav__icon' src={nav_07} />
             <Text className='index-nav__title'>税票查询</Text>
           </View>
        {/*   <View className='index-nav__item' onClick={this.upgrade.bind(this,'/pages/index/upgrade')}>
             <Image className='index-nav__icon' src={nav_08} />
             <Text className='index-nav__title'>代理升级</Text>
           </View>*/}
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/index/none')}>
             <Image className='index-nav__icon' src={nav_09}/>
             <Text className='index-nav__title'>商城</Text>
           </View>
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/index/service')}>
             <Image className='index-nav__icon' src={nav_10}/>
             <Text className='index-nav__title'>车主服务</Text>
           </View>
         </View>


         <View className='index-clumn content-30'>
           <View className='index-clumn__item' onClick={this.link.bind(this,'/pages/index/problem')}>
             <Image className='index-clumn__icon' src={icon_01}/>
             <Text className='index-clumn__title'>常见问题</Text>
           </View>
           <View className='index-clumn__item' onClick={this.link.bind(this,'/pages/index/needFile')}>
             <Image className='index-clumn__icon' src={icon_02}/>
             <Text className='index-clumn__title'>所需资料</Text>
           </View>
           <View className='index-clumn__item' onClick={this.link.bind(this,'/pages/index/queryAuth')}>
             <Image className='index-clumn__icon' src={icon_03} />
             <Text className='index-clumn__title'>真伪查询</Text>
           </View>
         </View>

        <View className='card-box content-30' style={{display: 'none'}} onClick={this.link.bind(this,'/pages/card/index')}>
          <View className='card-con'>
           <View className='card-box__info'>
             <View className='line'>
               信用卡一键 <Text className='n'>智能还款</Text>
             </View>
             <View className='line line2'>
               还款无忧 / 还款率低 / 省钱省心
             </View>
           </View>
           <Image className='card-boxn__img' src={icon_24} />
          </View>
        </View>

        {
          homeHeadlines.length>0&&
          <View className='service-process content-30'>
             <View className='service-process-title'>服务流程</View>
            {
              homeHeadlines.map(item => {
                return(
                  <View className='service-process-item'>
                    <View className='top'>
                      <Image className='top-icon' src={icon_05} />
                      <Text className='top-title'>{item.title}</Text>
                    </View>
                    <View className='bottom rich-text'>
                      <View className='bottom-icon' />
                      {/*<Text className='desc'>填写车主车辆信息及上传相关证件图片，按优惠金额支付即可。</Text>*/}
                      <RichText className='desc' nodes={item.content} />
                    </View>
                  </View>
                )
              })
            }
          </View>
        }


        <FooterInfo />

        <View className='footer-block'  />

        <FooterMenu currentMenu='index' />

      </View>
    )
  }
}

export default Index
